<template>
  <div>
    <headerC/>
    <div class="container-fluid">
      <div class="myContent" ref="myContent">
        <div class="container">
          <div class="row ">
            <div class="col">
              <div class="jumbotron  animated jackInTheBox pb-5">
                <div class="text-success text-center p-1">
                  <h1 class="animated pulse slower infinite">欢迎登录后台管理系统</h1>
                  <br>
                  <h5 class="">{{dateFormat(date)}}</h5>
                  <hr>
                  <button class="btn btn-outline-success animated bounceInLeft delay-1s" @click="exitFullscreen">取消全屏
                  </button>
                  <button class="btn btn-success animated bounceInRight delay-1s " @click="requestFullScreen">全屏</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headerC from "@/components/public/admin/header";
  
  export default {
    data() {
      return {
        fullHeight: document.documentElement.clientHeight,
        fullWidth: document.documentElement.clientWidth,
        date: new Date(),
      }
    },
    mounted() {
      // this.requestFullScreen();
      // document.getElementById("aaa").click();
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
          
          window.fullWidth = document.documentElement.clientWidth;
          that.fullWidth = window.fullWidth;
        })()
      };
      
      this.$refs.myContent.style.backgroundImage = "url(" + apis + "/api/common/bgimg)";
      this.$refs.myContent.style.height = that.fullHeight + "px";
      
      if (that.fullWidth < 1200) {
        layer.alert("浏览器最大或全屏,效果会更佳")
      }
      
      let _this = this; //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function () {
        _this.date = new Date();//修改数据date
      }, 100);
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
      }
    },
    methods: {
      //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
      dateFormat: function (time) {
        let date = new Date(time);
        let year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
		 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
		 * */
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
      requestFullScreen() {
        let de = document.documentElement;
        if (de.requestFullscreen) {
          de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
        }
        
        let $this = this;
        setTimeout(function () {
          $this.$refs.myContent.style.height = document.documentElement.clientHeight + "px";
        }, 1000);
        
      },
      
      exitFullscreen() {
        let de = document;
        if (de.exitFullscreen) {
          de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
          de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
          de.webkitCancelFullScreen();
        }
      },
    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val;
          this.timer = true;
          let that = this;
          this.$refs.myContent.style.height = that.fullHeight + "px";
          setTimeout(function () {
            that.timer = false
          }, 150)
        }
      },
      fullWidth(val, o) {
        
        if (!this.timer1) {
          this.fullWidth = val;
          this.timer1 = true;
          
          let that = this;
          setTimeout(function () {
            that.timer1 = false
          }, 500)
        }
      }
    },
    components: {
      headerC, //页眉
    },
  }
</script>

<style scoped>
  @import "animate.css";
  
  .myContent {
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0 -15px;
    height: 1000px;
  }
  
  .jumbotron {
    background-color: rgba(233, 236, 239, 0.9);
    margin-top: 15%;
  }
</style>
